<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .image-show{
        width: 210px;
        height:210px;
    }
    .css-xnjket {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 99999998;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.498039);
    display: none;
}
.css-xnjket canvas{
    width:1000px;
    margin: 30px auto;
}
    </style>
</head>

<body>
    <header>
        <nav>
            <ul>
                <li>one</li>
                ...
            </ul>
        </nav>
    </header>
    <section class="content">

        <div id="div_target">
            <span>hahahaha canvas</span>
        </div>
        <a id="down_qr" href="#" style="display: none">haha</a>
        <button id="b">button to get image</button><br>
        <!-- <img class="image-show" id="myIMG" src="./images/texture98.jpg" /> -->
        
<img id="myIMG" src= "./chart.png"/>
        </article>
    </section>
    <section class="css-xnjket"></section>
    <button onClick=btnClick()>click me</button>
    <footer>write by linwalker @2017</footer>
    <script type="text/javascript" src="./js/html2canvas.js"></script>
    <script type="text/javascript">
        function btnClick() {
            //   alert(1)
            //   var mask = document.getElementsByClassName('css-xnjket')[0]
            //   var content = document.getElementsByClassName('content')[0]
            //   console.log(mask)
            //   mask.style.display ='block'
            // html2canvas(content, {
            //   onrendered:function(canvas) {
            //     var imgUrl = canvas.toDataURL("image/png");//这里通过canvas的toDataURL方法把它转换成base64编码
            //     console.log(imgUrl)
            //     // mask.appendChild(canvas)
            //     // content.style.marginLeft='100px'
            //   }
            // })

            html2canvas(document.getElementById("div_target"), {
                onrendered: function (canvas) {
                    var imgURL = canvas.toDataURL("image/png");
                  
    	var imgURL = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");  
    	// window.open(imgURL)
                    // $('#myIMG').attr("src", imgURL);
                    // $('#b').on('click', function () {
                    //     $('#down_qr').attr('download', imgURL);
                    //     $('#down_qr').attr('href', imgURL);
                    //     document.getElementById('down_qr').click();
                    // });
                }
            });
        }

    </script>
</body>

</html>